<template>
	<view class="leave_box">
		<view class="a_header">
			<view class="a_box">
				<view class="nav_leave">
					<view class="n_l_l" @tap="goBack()">
						<img src="/static/images/job/icon_back_white.png" mode="scaleToFill" alt="">
					</view>
					<view class="n_l_c"></view>
					<view class="n_l_r"></view>
				</view>
				<view class="a_head">
					<view class="head_p">
						<img src="../../static/images/job/icon_job_right.png" alt="">
						<view>面试待接受</view>
					</view>
				</view>
				<view class="msg-box">
					<view class="msg-li">
						<img src="/static/images/job/icon_company_msg.png" mode="scaleToFill" alt="">
						<view class="l-c">
							<view class="p-name">瑞港工程有限公司</view>
							<view class="p-desc">我们为您发送一份面试邀请，请及时…</view>
						</view>
						<img class="li-r-arrow" src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill"
							alt="">
					</view>
					<view class="i-c-p i-f">
						<view class="i-c-p-l">時間</view>
						<view>2024-10-20 10:30</view>
					</view>
					<view class="i-c-p">
						<view class="i-c-p-l">職位</view>
						<view>‌‌工程部經理/10k-20k</view>
					</view>
					<view class="i-c-p">
						<view class="i-c-p-l">聯系人</view>
						<view>總經理</view>
					</view>
					<view class="i-c-p">
						<view class="i-c-p-l">電話</view>
						<view>13027948892</view>
					</view>
					<view class="p-gs">
						<img src="/static/images/job/icon_job_location.png" mode="scaleToFill" alt="">
						<view>公司地址</view>
					</view>
					<view class="p-dz">香港金鐘道88號太古廣場壹座33樓</view>
					<view class="p-gs">
						<img src="/static/images/job/icon_job_result.png" mode="scaleToFill" alt="">
						<view>面試結果</view>
					</view>
					<view class="wrap-result">
						<!-- 没有面试结果 -->
						<view class="no" v-if="false">
							<img src="/static/images/job/icon_job_no_in.png" mode="scaleToFill" alt="">
							<view>還沒有面試結果</view>
						</view>
						<!-- 面试成功 -->
						<view class="success">
							<img src="/static/images/job/icon_job_tg.png" mode="scaleToFill" alt="">
							<view>面試通過！</view>
						</view>
						<!-- 面试失败 -->
						<view class="fail" v-if="false">
							<img src="/static/images/job/icon_job_mtg.png" mode="scaleToFill" alt="">
							<view>抱歉，沒有通過面試～</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp-footer">
			<view class="btn-jj" @tap="handleJJ()">拒絕面試</view>
			<view class="btn-js" @tap="handleJs()">接受面試</view>
		</view>
	</view>
</template>

<script>
	import {
		multiStatus
	} from '../../utils/api';
	export default {
		components: {},
		data() {
			return {
				showCalendar: false,
				reason: '',
				stepsCurrent: -1,
				interview_id:'',
				steps: [{
						name: '直接主管：'
					},
					{
						name: '總經理：'
					}
				],
				vacationIndex: 0,
				vacationList: ['事假', '調休', '病假', '年假', '產假', '陪產假', '婚假', '例假', '喪假'],
				startDate: '',
				endDate: '',
			};
		},
		props: {
			couponList: {}
		},
		computed: {
			reasonLen() {
				return this.reason.length
			},
			timeDays() {

			}
		},
		methods: {
		  	multiStatusq(status) {
				let res =  multiStatus({interview_id:this.interview_id,status:status})
			},
			handleJJ() {
				uni.showModal({
					title: '提示',
					confirmColor: '#007AFF',
					content: `確定要拒絕面試邀請嗎?`,
					success: res => {
						this.multiStatusq(1)
					}
				});
			},
			handleJs()
			{
				this.multiStatusq(2)
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			submitApply() {
				uni.showModal({
					title: '提示',
					content: `確定提交請假申請嗎？`,
					success: res => {
						console.log('999')
					}
				});
			},
			changeCalendar(e) {
				this.startDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			changeCalendarEnd(e) {
				this.endDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			changeVacationType() {
				let that = this
				uni.showActionSheet({
					itemList: that.vacationList,
					title: '請假類型',
					success: ({
						tapIndex
					}) => {
						this.vacationIndex = tapIndex
					},
					fail: (error) => {}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.leave_box {
		width: 100%;
		height: 100vh;
		// overflow-y: scroll;
	}

	.a_box {
		width: 100%;
		height: 440px;
		background: linear-gradient(180deg, #0274F2 0%, #F4F6FA 100%);
	}

	.msg-box {
		width: calc(100% - 50px);
		padding: 10px 15px;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
	}

	.msg-li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10px 0;
		border-bottom: 0.5px solid #F3F3F3;

		img {
			display: block;
			width: 52px;
			height: 52px;
		}

		img.li-r-arrow {
			width: 7px;
			height: 14px;
		}

		.l-c {
			width: calc(100% - 62px);
			margin: 0 10px;
		}

		.l-r {
			width: calc(100% - 62px);
			font-size: 14px;
			color: #999999;
			line-height: 18px;
		}
	}

	.p-name {
		height: 21px;
		font-size: 15px;
		color: #333333;
		line-height: 21px;
	}

	.p-desc {
		height: 18px;
		font-size: 13px;
		color: #666666;
		line-height: 18px;
		margin-top: 5px;
	}

	.nav_leave {
		width: calc(100% - 20px);
		height: 44px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
		font-size: 15px;
		color: #333333;
		line-height: 21px;
		background: transparent;
	}

	.n_l_l {
		width: 80px;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		img {
			width: 9px;
			height: 16px;
			margin-left: 9px;
		}
	}

	.n_l_r {
		width: 80px;
		text-align: right;
	}

	.n_l_c {
		width: calc(100% - 90px);
		text-align: center;
	}

	.a_head {
		width: calc(100% - 20px);
		margin: 22px auto 10px;

		.head_p {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 36px;
			font-weight: 600;
			font-size: 25px;
			color: #FFFFFF;
			line-height: 36px;

			img {
				width: 25px;
				height: 25px;
				margin-right: 10px;
			}
		}
	}

	.i-f {
		margin-top: 34px;
	}

	.i-c-p {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-weight: 600;
		font-size: 15px;
		color: #333333;
		line-height: 21px;
		margin-bottom: 15px;
	}

	.i-c-p-l {
		width: 55px;
		height: 21px;
		font-size: 15px;
		color: #666666;
		line-height: 21px;
		text-align: left;
	}

	.p-gs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 22px;
		font-weight: 600;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		margin-top: 5px;

		img {
			width: 16px;
			height: 19px;
			margin-right: 5px;
		}
	}

	.p-dz {
		margin: 10px 0 20px;
		height: 23px;
		font-size: 14px;
		color: #666666;
		line-height: 23px;
	}

	.wrap-result {
		view {
			height: 20px;
			font-size: 14px;
			display: grid;
			place-items: center;
			line-height: 20px;
		}

		img {
			width: 98px;
			height: 98px;
			display: block;
			margin: 20px auto 10px;
		}

		.no,
		.fail {
			color: #768396;
		}

		.success {
			color: #1C7AF7;
		}
	}

	.a_header {
		width: 100%;
		height: calc(100vh - 70px);
		// overflow-y: scroll;
	}

	.warp-footer {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 44px;
		text-align: center;
		background: #fff;
	}

	.btn-jj {
		width: 110px;
		height: 44px;
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #1C7AF7;
		margin-right: 10px;
		border: 1px solid #1C7AF7;
	}

	.btn-js {
		width: 215px;
		height: 44px;
		background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
	}
</style>